<template>
  <div>
    <el-table>
      <el-table-column></el-table-column>
      <el-table-column></el-table-column>
    </el-table>
    <avue-crud :data="data" :option="tableOption" :search.sync="search" :page.sync="page" ref="crud"
               @search-change="searchChange"
               @selection-change="selectionChange"
               @row-update="rowUpdate"
               @row-save="rowSave">
    </avue-crud>
<el-button @click="toggleRowHandler">toggleRowHandler</el-button>
<el-button @click="cancelSelection">取消选择</el-button>
  </div>
</template>

<script>
import {validatenull} from "@/utils/validate"
export default{
  name:"avue-index",
  data() {
    return {
      search:{
        name:'small'
      },
      entryName:'',
      page:{
        total:1000,
        layout: "total, sizes, prev, pager, next, jumper",
      },
      tableOption: {
        header:true,
        addBtn:true,
        columnSort:true,
        selection:true,
        searchBtnIcon:'el-icon-user',
        column:[{
          label:'姓名',
          prop:'name',
          slot:true ,
          search:true,
          headerslot:true,
        },{
          label:'年龄',
          prop:'age',
        },
          {
            label: "项目名称",
            prop: "entryName",
            align:'center',
            search: true,
            searchSpan: 5,
            type: "select",
            // hide:true,
            dicData:[
              { label:'未提交',value:0 },
              { label:'审批中',value:1 },
              { label:'驳回',value:2 },
              { label:'已通过',value:3 },
            ],
            rules: [
              {
                required: true,
                message: "请输入流程状态",
                trigger: "blur",
              },
            ],
            change: ({value, column}) => {
              const text = this.getDicSelectText(column.prop, value);
              console.log('text:',text)
              this.entryName = text;
            },
          },
            {
                label: '省份',
                prop:'province',
                type:'select',
                search:true,
                cell:true,
                props: {
                    label: 'name',
                    value: 'code'
                },
                dicUrl:`https://cli.avuejs.com/api/area/getProvince`
            }]
      },
      data:[{name:'张三',age:"20",id:'1'},{name:'李四',age:'26',id:'2'}],
      option: {
        column: [
          {
              label: '下拉框',
              prop: 'select2',
              type: 'select',
              props: {
                  label: 'name',
                  value: 'code'
              },
              dicUrl: 'https://cli.avuejs.com/api/area/getProvince'
          },
          {
            label:'输入框',
            prop:'input',
            type:'input',
            value:'默认值11',
            clearable:false
          },
          {
            label:'输入框',
            prop:'input1',
            value:'默认值'
          }
        ]
      },
        //---tree相关---
      treeOption:{
          defaultExpandAll:true,
          multiple:true,
          menu:true,
          formOption:{
              labelWidth:100,
              column:[{
                  label:'自定义项',
                  prop:'label'
              },{
                  label:'测试',
                  prop:'test'
              }],
          }
      },
      form:{},
      treeData:[
          {
              value:0,
              label:'一级部门',
              children:[
                  {
                      value:1,
                      label:'一级部门1',
                  },{
                      value:2,
                      label:'一级部门2',
                  }
              ]
          },{
              value:3,
              label:'二级部门',
              children:[
                  {
                      value:4,
                      label:'二级部门1',
                  },{
                      value:5,
                      label:'二级部门2',
                  }
              ]
          }
      ],
      formData:{} ,
      selectionList:[]
    }
  },
  methods:{
    searchChange(params, done) {
      params.entryName = this.entryName ;
      this.query = params;
      console.log("params:",params)
      // this.page.currentPage = 1;
      // this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = [];
      if (list.length > 1) {
        list.map(item=>{
          this.$refs.crud.toggleRowSelection(item,false);
        })
        this.$refs.crud.toggleRowSelection(
            list[list.length - 1],true
        );
      }
      this.selectionList = [list[list.length - 1]];
    },
    checkSingle(rows){
      if (rows) {
        rows.forEach(row => {
          this.$refs.crud.toggleRowSelection(row);
        });
      }else{
        this.$refs.crud.clearSelection();
      }

    },
    toggleRowHandler(){
      this.$refs.crud.toggleRowSelection(this.data[0])
    },
    cancelSelection(){

    },
    rowSave(form,done){
      console.log("rowSave")
      //done(form) ;
    },
    rowUpdate(form,index,done,loading){
      this.$message.success('关闭按钮等待');
      setTimeout(function(){
        loading();
      },1000)
      done(form) ;
    },
    getDicSelectText(type, value) {
      if (validatenull(value)) {
        return "";
      }

      const bl = this.$refs.crud.DIC.hasOwnProperty(type);
      if (bl) {
        const obj = this.$refs.crud.DIC[type].find(item => item.value == value);
        if (!validatenull(obj)) {
          return obj.label;
        }
      }
      return "";
    },
    handleAddCell(){
        this.$refs.crud.rowCellAdd({
            name: '',
        });
    },
      submitTest(){
        console.log("this.formData:",this.formData)
      }
  }
}
</script>